<template>
	<view>
		<view class="content">
			<!-- <u-sticky style="position: fixed;top: 0;z-index: 100;"> -->
				<u-navbar :is-back="true" :title="title"  title-color="#000" :border-bottom="false">
				</u-navbar>
			<!-- </u-sticky> -->
			<view class="main">
				<scroll-view  class="mainNav" scroll-x="true" :scroll-left="scrollLeft" style="white-space: nowrap;">
					<view :class="'mainNavItem ' + (type == 1 ? 'nav1' : type == 2 ? 'nav2' : type == 3 ? 'nav2' : '')"  @click="onMainNav(item,index)" :style="mainNavIndex == index ? 'border-bottom: 6rpx solid #1B9CFF;color: #1B9CFF' : ''" v-for="(item,index) in NavList" :key="index">
						{{item.name}}
					</view>
				</scroll-view >
				<view class="mainNav2">
					<!-- 地市 -->
					<!-- <view class="mainNav2_item" style="border-radius: 30rpx 0 0 30rpx;margin-right: 0;border-right: 1px solid #D5D5D5;" @click="show = true && list.length > 0">
						<span class="mainNav2_item_nr">{{cityName}}</span>
						<view class="mainNav2_sjx"></view>
					</view> -->
					<!-- 区县 -->
					<view class="mainNav2_item" style="border-radius:30rpx" @click="show2 = true && list2.length > 1">
						<span class="mainNav2_item_nr">{{qxName}}</span>
						<view class="mainNav2_sjx"></view>
					</view>
					<!-- 归属 -->
					<view class="mainNav2_item" @click="show3 = true" v-if="type == 1 && mainNavIndex != 2">
						<span class="mainNav2_item_nr">{{gsName}}</span>
						<view class="mainNav2_sjx"></view>
					</view>
				</view>
				<view class="mainTable">
					<view class="mainTableNr" v-if="type == 1">
						<view class="tableTh" v-if="mainNavIndex != 2">
							<span class="tableData_topTitle" style="width: 60rpx;">地市</span>
							<span class="tableData_topTitle" style="width: 60rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 60rpx;">归属</span>
							<span class="tableData_topTitle" style="width: 76rpx;">是否OLT站点</span>
							<span class="tableData_topTitle">站点名称</span>
							<span class="tableData_topTitle">历时(分钟)</span>
						</view>
						<view class="tableTh" v-if="mainNavIndex == 2">
							<span class="tableData_topTitle" style="width: 60rpx;">地市</span>
							<span class="tableData_topTitle" style="width: 60rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 146rpx;">隐患工单号</span>
							<span class="tableData_topTitle">隐患名称</span>
							<span class="tableData_topTitle">网元名称</span>
							<span class="tableData_topTitle">隐患处理时限</span>
						</view>
						<view class="tableTd" :style="{height: isHig && DataList1.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList1.length>0 && mainNavIndex != 2" :class="getRowClass(index)" v-for="(item, index) in DataList1" :key="index">
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.City }}</span>
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.Revert }}</span>
								<span class="tableData_bomTitle" style="width: 76rpx;">{{ item.IsOltSite }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.SiteName)">{{ item.SiteName }}</span>
								<span class="tableData_bomTitle">{{ item.Fdduration }}</span>
							</view>	
							<view v-if="DataList1.length>0 && mainNavIndex == 2" :class="getRowClass(index)" v-for="(item, index) in DataList1" :key="index">
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.City }}</span>
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Code)" style="width: 146rpx;">{{ item.Code }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Hiddenname)">{{ item.Hiddenname }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Nename)">{{ item.Nename }}</span>
								<span class="tableData_bomTitle">{{ item.Hiddentime }}</span>
							</view>	
							<!-- <view class="tableTdNull" v-if="DataList1.length == 0">
								无
							</view> -->
						</view>
					<!-- 	<view class="gengduo" @click="onGD()" v-if="isHig && DataList1.length > 3">
							展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
						</view> -->
					</view>
					<view class="mainTableNr" v-if="type == 2">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 60rpx;">地市</span>
							<span class="tableData_topTitle" style="width: 60rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 200rpx;">工单号</span>
							<span class="tableData_topTitle" style="width: 200rpx;">工单主题</span>
							<span class="tableData_topTitle" style="width: 200rpx;">处理班组</span>
							<span class="tableData_topTitle" style="width: 200rpx;">网元信息</span>
							<span class="tableData_topTitle" style="width: 200rpx;">告警标题</span>
						</view>
						<view class="tableTd" :style="{height: isHig && DataList2.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList2.length>0" :class="getRowClass(index)" v-for="(item, index) in DataList2" :key="index">
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.City }}</span>
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle" style="width: 200rpx;">{{ item.Code }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Subject)">{{ item.Subject }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Group)">{{ item.Group }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.NeName)">{{ item.NeName }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.WarnTitle)">{{ item.WarnTitle }}</span>
							</view>	
							<!-- <view class="tableTdNull" v-if="DataList2.length == 0">
								无
							</view> -->
						</view>
						<!-- <view class="gengduo" @click="onGD()" v-if="isHig && DataList2.length > 3">
							展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
						</view> -->
					</view>
					<view class="mainTableNr" v-if="type == 3">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 60rpx;">地市</span>
							<span class="tableData_topTitle" style="width: 60rpx;">区县</span>
							<span class="tableData_topTitle">机房名称</span>
							<span class="tableData_topTitle">发电状态</span>
							<span class="tableData_topTitle">超时发电状态</span>
							<span class="tableData_topTitle">停电时间</span>
							<span class="tableData_topTitle">发电开始时间</span>
							<span class="tableData_topTitle">恢复时间</span>
							<span class="tableData_topTitle">直流电压</span>
						</view>
						<view class="tableTd" :style="{height: isHig && DataList3.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList3.length>0" :class="getRowClass(index)" v-for="(item, index) in DataList3" :key="index">
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.City }}</span>
								<span class="tableData_bomTitle" style="width: 60rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.SiteName)">{{ item.SiteName }}</span>
								<span class="tableData_bomTitle">{{ item.FdStatus }}</span>
								<span class="tableData_bomTitle" >{{ item.FOutTimeStatus }}</span>
								<span class="tableData_bomTitle" >{{ item.Tdtime }}</span>
								<span class="tableData_bomTitle" >{{ item.Fdtime }}</span>
								<span class="tableData_bomTitle" >{{ item.HfTime }}</span>      
								<span class="tableData_bomTitle" >{{ item.Dcvoltage }}</span>
							</view>	
						<!-- 	<view class="tableTdNull" v-if="DataList3.length == 0">
								无
							</view> -->
						</view>
						<!-- <view class="gengduo" @click="onGD()" v-if="isHig && DataList3.length > 3">
							展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 地市 -->
		<u-select v-model="show" :list="list" :default-value="defaultValue" @confirm="confirm"></u-select>
		<!-- 区县 -->
		<u-select v-model="show2" :list="list2" :default-value="defaultValue2" @confirm="confirm2"></u-select>
		<!-- 自维铁塔 -->
		<u-select v-model="show3" :list="list3" :default-value="defaultValue3" @confirm="confirm3"></u-select>
		<view>
			<u-popup v-model="tcText" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#000">
				<view class="popupBox">
					<!-- <view class="titleView">温馨提示</view> -->
					<view class="boxNr">
						<view class="nrTitle">
							{{pageText}}
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		watch: {
		    '$route'(to, from) {
				// 根据参数更新页面数据
				this.cityName = this.$route.query.cityName
				this.qxName = this.$route.query.districtName || '全部'
				this.type = this.$route.query.type
				this.mainNavIndex = this.$route.query.navType
				this.updatePageData();
				//获取地市
				this.getmxcity()
		    }
		},
		data() {
			return {
				defaultValue: [0],
				defaultValue2: [0],
				defaultValue3: [0],
				title: '',
				cityName: this.$route.query.cityName || '湖北',
				qxName: '',
				NavList: [],
				scrollLeft: 0,
				mainNavIndex: this.$route.query.navType || '0',
				mainTableTitle: '',
				DataList1: [],
				DataList2: [],
				DataList3: [],
				isHig: false,
				show: false,
				show2: false,
				show3: false,
				gsName: '全部',
				list: [],
				list2: [],
				list3: [
					{
						label: '全部',
						value: '0',
					},
					{
						label: '铁塔',
						value: '1',
					},
					{
						label: '自维',
						value: '2',
					}
				],
				mainNavName:'',
				type: 1,
				tcText: false,
				pageText: '',
			}
		},
		mounted() {
			// 根据参数更新页面数据
			this.cityName = this.$route.query.cityName
			this.qxName = this.$route.query.districtName
			this.type = this.$route.query.type
			this.updatePageData();
			//获取地市
			this.getmxcity()
		},
		methods: {
			openTc(text){
				this.pageText = text
				this.tcText = true
			},
			async getmxcity() {
				let newType = this.type == 1 ? (this.mainNavIndex == '0' ? '7' : this.mainNavIndex == '1' ? '8' : this.mainNavIndex == '2' ? '9' : '7')  : this.type == 2 ? (this.mainNavIndex == '0' ? '4' : this.mainNavIndex == '1' ? '5' : '4') : this.type == 3 ? (this.mainNavIndex == '0' ? '6' : this.mainNavIndex == '1' ? '10' : '6') : '6'
				let parmes = '?type='+ newType 
				let data = await this.$api.getmxcity(parmes);
				if (data.Code == 200) {
					const newList = data.Data.map((item,index) => ({
					  value: index,
					  label: item
					}))
					this.list = newList
					const index = newList.findIndex(item => item.label === this.cityName);
					this.defaultValue[0] = index
					//区县
					this.getmxcounty()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//区县
			async getmxcounty(){
				let newType = this.type == 1 ? (this.mainNavIndex == '0' ? '7' : this.mainNavIndex == '1' ? '8' : this.mainNavIndex == '2' ? '9' : '7')  : this.type == 2 ? (this.mainNavIndex == '0' ? '4' : this.mainNavIndex == '1' ? '5' : '4') : this.type == 3 ? (this.mainNavIndex == '0' ? '6' : this.mainNavIndex == '1' ? '10' : '6') : '6'
				let parmes = '?type='+ newType + '&city=' + this.cityName 
			
				let data = await this.$api.getmxcounty(parmes);
				if (data.Code == 200) {
					
					const newList = data.Data.map((item,index) => ({
					  value: index,
					  label: item
					}))
					console.log('newList',newList)
					this.list2 = newList || []
					// if(newList.length == 0){
					// 	this.qxName = '无 '
					// }else{
					// 	this.qxName = newList[0].label
					// }
					const index = newList.findIndex(item => item.label === this.qxName);
					this.defaultValue2[0] = index
					this.getdataInfo()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			 updatePageData() {
		     
			 let type = this.$route.query.type
			 if(type == 1){
			 	this.title = '省内隐患'
			 	this.NavList = [
			 		{
			 			name: '蓄电池不足1小时'
			 		},
			 		{
			 			name: '蓄电池不足3小时'
			 		},
			 		{
			 			name: '超长、超频告警'
			 		}
			 	]
			 	this.mainTableTitle = '省内隐患-'+ this.NavList[0].name +'-'+ this.$route.query.cityName
			 }else if(type == 2){
			 	this.title = '超时工单'
			 	
			 	this.NavList = [
			 		{
			 			name: '一级工单'
			 		},
			 		{
			 			name: '二级工单'
			 		}
			 	]
			 	this.mainTableTitle = '超时工单-'+ this.NavList[0].name +'-'+ this.$route.query.cityName
			 }else if(type == 3){
			 	this.title = '汇聚机房停电'
			 	
			 	this.NavList = [
			 		{
			 			name: '停电数'
			 		},
			 		{
			 			name: '未发电数'
			 		}
			 	]
			 	this.mainTableTitle = '汇聚机房停电-'+ this.$route.query.cityName
			 }
			 this.getdataInfo()
		    },	
			//明细
			async getdataInfo() {
				let newType = this.type == 1 ? (this.mainNavIndex == '0' ? '7' : this.mainNavIndex == '1' ? '8' : this.mainNavIndex == '2' ? '9' : '7')  : this.type == 2 ? (this.mainNavIndex == '0' ? '4' : this.mainNavIndex == '1' ? '5' : '4') : this.type == 3 ? (this.mainNavIndex == '0' ? '6' : this.mainNavIndex == '1' ? '10' : '6') : '6'
			
				let parmes = '?type='+ newType + '&city=' + this.cityName + '&County=' + this.qxName + '&Revert=' + (this.type == 1 ? (this.gsName == '铁塔' ? '1' : '2') : '0')
				let data = await this.$api.getdataInfo(parmes);
				if (data.Code == 200) {
					if(this.type == 1){
						//蓄电池不足
						this.DataList1 = data.Data
					}else if(this.type == 2){
						//一二级工单
						this.DataList2 = data.Data
					}else if(this.type == 3){
						//机房停电
						this.DataList3 = data.Data
					}
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			getRowClass(index) {
			    // 检查行号是否为奇数（长度为1、3、5等）
			    if (index % 2 !== 0) {
			      return 'odd-row tableTr';
			    }
			    return 'tableTr';
			},
			onMainNav(item,index){
				this.mainNavIndex = index
				this.mainNavName = item.name
				if(this.type == 1){
					this.mainTableTitle = '省内隐患-'+ item.name +'-'+ this.cityName
				}else if(this.type == 2){
					this.mainTableTitle = '超时工单-'+ item.name +'-'+ this.cityName
				}else if(this.type == 3){
					this.mainTableTitle = '汇聚机房停电-'+ item.name +'-'+ this.cityName
				}
				this.defaultValue[0] = index
				this.getdataInfo()
				//获取地市
				this.getmxcity()
			},
			confirm(e) {
				this.cityName = e[0].label
				const index = this.list.findIndex(item => item.label === this.cityName);
				this.defaultValue[0] = index
				//查区县
				this.getmxcounty()
			},
			confirm2(e){
				this.qxName = e[0].label
				const index = this.list2.findIndex(item => item.label === this.qxName);
				this.defaultValue2[0] = index
				this.getdataInfo()
			},
			confirm3(e){
				this.gsName = e[0].label
				const index = this.list3.findIndex(item => item.label === this.gsName);
				this.defaultValue3[0] = index
				this.getdataInfo()
			}
		}
	}
</script>

<style lang="less">
	.content{
		height: 100vh;
		overflow: hidden;
	}
	.main {
		width: 100%;
		min-height: calc(100vh - 88rpx) ;
		background: #F5F6F7;
		margin-top: 88rpx;
		display: block;
		.mainNav{
			display: flex;
			align-items: center;
			width: 750rpx;
			background-color: #fff;
			border-top: 1px solid #F0F1F2;
			position: fixed;
			top: 88rpx;
			left: 0;
			z-index: 100;
			.mainNavItem{
				display: inline-block;
				line-height: 84rpx;
				font-size: 30rpx;
				margin-left: 26rpx;
				margin-right: 10rpx;
				color: #A7ABBB;
			}
			.nav2{
				width: 44%;
				text-align: center;
			}
		}
		.mainNav2{
			width: 750rpx;
			height: 86rpx;
			background: #EEF4FC;
			border: 1rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			position: fixed;
			top: 180rpx;
			left: 0;
			z-index: 100;
			.mainNav2_item{
				padding: 12rpx 34rpx;
				background: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				border: 1rpx solid #F1F1F1;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
			.mainNav2_sjx{
				  width: 0;
				  height: 0;
				  border-left: 10rpx solid transparent; /* 左边框透明 */
				  border-right: 10rpx solid transparent; /* 右边框透明 */
				  border-top: 18rpx solid #000; /* 上边框有颜色，形成三角形 */
				  margin-left: 26rpx;
			}
		}
		.mainTable{
			width: 750rpx;
			background: #FFFFFF;
			margin-top: 93rpx;
			display: inline-block;
			.mainTable_topTitle{
				height: 98rpx;
				display: flex;
				align-items: center;
				.mainTable_topTitle_ble{
					margin-left: 34rpx;
					margin-right: 22rpx;
					width: 8rpx;
					height: 30rpx;
					background: #1B9CFF;
					border-radius: 4rpx;
				}
				.mainTable_topTitle_name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}
			}
			.mainTableNr{
				width: 710upx;
				border-radius: 20upx 20upx 0 0;
				overflow: hidden;
				position: relative;
				margin: 30rpx auto;
				background-color: #fff;
				overflow-x: auto;
				.tableTh{
					height: 103rpx;
					background: #F2F5F8;
					box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108,148,182,0.2);
					border: 1rpx solid #A4B8D3;
					border-radius: 20upx 20upx 0 0;
					display: flex;
					align-items: center;
					overflow: hidden;
					position: absolute;
					top: 0;
					.tableData_topTitle{
						width: 200rpx;
						flex: 1;
						text-align: center;
						display: block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #2654B0;
						margin: 0 5rpx;
					}
				
				}
				.tableTd{
						padding: 100upx 0 0;
						height: 1260rpx;
						display: inline-block;
						overflow-y: auto;
						.tableTr{
							padding: 10upx 0;
							display: flex;
							align-items: center;
							border-radius: 8rpx;
							width: max-content;
						}
						.odd-row{
							background: #F1F6FF;
						}
						.tableData_bomTitle{
							width: 200rpx;
							flex: 1;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24upx;
							color: #5F6475;
							line-height: 24px;
							font-style: normal;
							text-transform: none;
							margin: 0 5rpx;
						}
					}
				.gengduo{
					width: 709upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F1F6FF;
					position: absolute;
					bottom: 0;
					left: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;
					.icon_arrow_down{
						width: 24upx;
						height: 12upx;
						margin-left: 13upx;
					}
				}
				.tableTdNull{
					width: 100%;
					text-align: center;
					margin: 40rpx auto;
					font-size: 28rpx;
					color: #5F6475;
				}
			}
			
		}
	}
	.ccyc{
		overflow: hidden; /* 隐藏超出部分 */
		display: -webkit-box; /* 使用 WebKit 线性布局 */
		-webkit-line-clamp: 2; /* 限制显示两行 */
		-webkit-box-orient: vertical; /* 垂直排列内容 */
		text-overflow: ellipsis; /* 显示省略号 */
	}
	.popupBox{
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		.boxNr{
			width: 500rpx;
			max-height: 600rpx;
			background: #F7F9FC;
			overflow-y: auto;
		}
		.nrTitle{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			padding: 28upx 30upx;
		
		}
	}
	.u-line-1{
		overflow: auto !important; 
	}
</style>